<template>
  <div class="right-out">
    <div class="nav">资源动态</div>
    <div class="content">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input size="large" :prefix-icon="Search" />
        </el-form-item>
        <el-form-item>
          <el-button type="info" plain class="search" size="large"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item label="资源类型：" class="allResource">
          <el-select placeholder="全部资源" placement="bottom-start">
            <el-option label="全部资源" />
            <el-option label="作品" />
            <el-option label="教程" />
            <el-option label="动态" />
            <el-option label="专题" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" class="status">
          <el-select placeholder="全部">
            <el-option label="全部" />
            <el-option label="已发布" />
            <el-option label="未发布" />
            <el-option label="审核中" />
            <el-option label="审核未通过" />
            <el-option label="仅主页可见" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-table
        height="250"
        class="table"
        style="width: 100%"
        :header-cell-style="{
          background: '#f5f7f9',
          color: '#393939',
          fontWeight: '400',
        }"
      >
        <el-table-column
          prop="date"
          label="内容"
          width="400px"
          align="center"
        />
        <el-table-column
          prop="name"
          label="发布时间"
          width="150px"
          align="center"
        />
        <el-table-column
          prop="address"
          label="数据"
          width="130px"
          align="center"
        />
        <el-table-column
          prop="address"
          label="状态"
          width="130px"
          align="center"
        />
        <el-table-column
          prop="address"
          label="操作"
          width="130px"
          align="center"
        />
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Resource",
};
</script>

<script setup lang="ts">
// import { useRoute } from "vue-router";
import { Search } from "@element-plus/icons-vue";
</script>

<style scoped lang="scss">
.right-out {
  .nav {
    width: 1020px;
    background-color: white;
    border-radius: 3px;
    padding: 28px 30px;
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 10px;
    text-align: left;
  }
  .content {
    width: 1020px;
    min-height: 700px;
    background-color: white;
    border-radius: 3px;
    .demo-form-inline {
      padding: 16px 14px 0;
      .el-input {
        background-color: #f5f7f9;
        width: 270px;
        text-align: left;
      }
      .search {
        border: none;
        margin-left: -20px;
        &:hover {
          background-color: #eee;
          color: #7d8090;
        }
      }
      .allResource {
        margin-left: -10px;
      }
      .status {
        margin-left: -15px;
      }
    }
    .table {
      padding: 0 30px;
    }
  }
}
</style>
